<template>
	<view class="donate-main">
		<view class="danate-top">
			<view class="top-title">
				<text>{{ pagesData.donationName }}</text>
				<button :plain="true">活动详情</button>
			</view>
			<view class="top-process">
				<view class="process-line"></view>
				<view class="process-node">
					<view style="width: 33%;">
						<image mode="widthFix" src="../../static/donate/img_donate_first_node.png"></image>
						<text>提交申请</text>
					</view>
					<!-- <view style="width: 24%;">
						<image mode="widthFix" src="../../static/donate/img_donate_second_node.png"></image>
						<text>系统审核</text>
					</view> -->
					<view style="width: 33%;">
						<image mode="widthFix" src="../../static/donate/img_donate_third_node.png"></image>
						<text>邮寄/送货/上门</text>
					</view>
					<view style="width: 33%;">
						<image mode="widthFix" src="../../static/donate/img_donate_fourth_node.png"></image>
						<text>确认完成</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 捐赠人信息 -->
		<view class="person-info">
			<view class="info-title">
				<view></view>
				<text>捐赠人信息</text>
			</view>
			<view class="info-form">
				<view class="form-item">
					<text class="info-name">{{ personType == 0 ? '姓名' : '单位名称' }}：</text>
					<!-- <text>{{ pagesData.founder }}</text> -->
					<input type="text" v-model="personInfo.userName" placeholder="请输入姓名" />
				</view>
				<view class="form-item">
					<text class="info-name">{{ personType == 0 ? '手机号码' : '企业信用代码' }}：</text>
					<input type="text" v-model="personInfo.userPhone" placeholder="请输入手机号码" />
				</view>
				<view class="form-item">
					<text class="info-name">{{ personType == 0 ? '身份证号码' : '捐赠方联系人' }}：</text>
					<!-- <text v-if="personType == 0">{{ pagesData.idCard }}</text> -->
					<input type="text" v-if="personType == 0" v-model="personInfo.userCard" placeholder="请输入身份证号码" />
					<input v-if="personType == 1" type="text" placeholder="请输入联系人姓名" />
				</view>
				<view class="form-item" v-if="personType == 1">
					<text class="info-name">捐赠方手机号：</text>
					<input type="text" placeholder="请输入捐赠方联系方式" />
				</view>
				<!-- <view class="form-item">
					<text class="info-name" style="flex:1;">是否匿名：</text>
					<view class="form-radio" style="margin-right: 68rpx;" @click="changeAnonymity(false)">
						<image v-show="!anonymity" mode="widthFix" src="../../static/donate/img_donate_radio_active.png"></image>
						<image v-show="anonymity" mode="widthFix" src="../../static/donate/img_donate_radio.png"></image>
						<text>否</text>
					</view>
					<view class="form-radio" @click="changeAnonymity(true)">
						<image v-show="!anonymity" mode="widthFix" src="../../static/donate/img_donate_radio.png"></image>
						<image v-show="anonymity" mode="widthFix" src="../../static/donate/img_donate_radio_active.png"></image>
						<text>是</text>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 其他信息 -->
		<view class="person-info">
			<view class="info-title">
				<view></view>
				<text>其他信息</text>
			</view>
			<view class="info-form">
				<view class="form-item">
					<view class="info-name">
						<text>物流方式：</text>
						<image @click="showTip" mode="widthFix" src="../../static/donate/img_donate_logistics_help.png"></image>
					</view>
					<u-modal v-model="showLogisticsTip" :show-title="false" :show-confirm-button="false">
						<view class="tip" width="520">
							<view class="tip-top"><text>物流方式说明</text></view>
							<view class="tip-center">
								<text>
									<span>捐赠者送货上门：</span>
									<br />
									若捐赠方将捐赠品直接送至应急管理厅，可选择“捐赠者送货上门”
									<br />

									<span>捐赠者自主寄送：</span>
									<br />
									若捐赠方自己邮寄快递送至应急管理厅，可选择“捐赠者自主寄送”
									<br />

									<span>单位上门（大批量）：</span>
									<br />
									如您有大批量物资需要捐赠，可选“单位上门（大批量）”
								</text>
							</view>
							<view class="tip-bottom"><text @click="closePop">确定</text></view>
						</view>
					</u-modal>

					<view style="flex:1;"></view>
					<view @click="showLogistics" class="choose-logistics">
						<text style="margin-right: 15rpx;">{{ logisticsType[choosed].text }}</text>
						<u-icon name="arrow-down-fill" color="#fe5745" size="28"></u-icon>
					</view>
					<u-action-sheet :cancel-btn="false" :list="logisticsType" v-model="showLogisticsType" @click="chooseLogistice" :safe-area-inset-bottom="true"></u-action-sheet>
				</view>
				<!-- <view class="form-item" v-show="choosed == 2">
					<text class="info-name">联系人：</text>
					<input type="text" v-model="personInfo.contacts" placeholder="请输入联系人姓名" />
				</view>
				<view class="form-item" v-show="choosed == 2">
					<text class="info-name">联系人手机号：</text>
					<input type="text" v-model="personInfo.contactsPhone" placeholder="请输入手机号码" />
				</view>
				<view class="form-item" v-show="choosed == 2">
					<text class="info-name">联系地址：</text>
					<input type="text" v-model="personInfo.contactsAddress" placeholder="请输入联系地址" />
				</view> -->
				<view class="form-item" v-show="choosed != 2">
					<text class="info-name">接收人姓名：</text>
					<text>{{ pagesData.recipient }}</text>
				</view>
				<view class="form-item" v-show="choosed != 2">
					<text class="info-name">接收人联系方式：</text>
					<text>{{ pagesData.recipientPhone }}</text>
				</view>
				<view class="form-item" v-show="choosed != 2">
					<text class="info-name">物资接收地：</text>
					<text>{{ pagesData.address }}</text>
				</view>
				<!-- <view class="form-item" style="border-bottom: none;">
					<text class="info-name">是否需要发票：</text>
					<view class="form-radio" style="margin-right: 68rpx;" @click="changeInvoice(false)">
						<image v-show="!needInvoice" mode="widthFix" src="../../static/donate/img_donate_radio_active.png"></image>
						<image v-show="needInvoice" mode="widthFix" src="../../static/donate/img_donate_radio.png"></image>
						<text>否</text>
					</view>
					<view class="form-radio" @click="changeInvoice(true)">
						<image v-show="!needInvoice" mode="widthFix" src="../../static/donate/img_donate_radio.png"></image>
						<image v-show="needInvoice" mode="widthFix" src="../../static/donate/img_donate_radio_active.png"></image>
						<text>是</text>
					</view>
				</view>
				<textarea v-show="needInvoice" class="textarea-style" placeholder-style="font-size:28rpx;color: #999999;" placeholder="如有需要，请输入发票备注信息"></textarea> -->
			</view>
		</view>

		<!-- 捐赠物资 -->
		<view class="donate-goods">
			<view class="info-title">
				<view></view>
				<text>捐赠物资</text>
			</view>
			<view class="goods-types">
				<view
					class="goods-btn"
					v-for="(item, index) in pagesData.donationSuppliesInfoList"
					:key="index"
					:style="{ 'margin-left': index % 3 == 0 ? '0rpx' : '40rpx' }"
					:class="{ 'goods-btn-active': activeType == index }"
					@click="changeTypes(index)"
				>
					<text>{{ item.itemsName }}</text>
				</view>
			</view>
			<button class="add-goodstype" @click="addGoods(activeType)">添加</button>
		</view>

		<!-- 物资具体信息 -->
		<view class="goods-detail" v-for="(item, index) in items" :key="index">
			<view class="del" @click="delGoods(index)"><u-icon name="close" size="24"></u-icon></view>
			<text class="detail-title">{{ item.itemsName }}</text>
			<view class="info-form">
				<!-- <view class="form-item">
					<text class="info-name">最低响应数量：</text>
					<text>50件</text>
				</view> -->
				<!-- <view class="form-item">
					<text class="info-name">品牌型号：</text>
					<input type="text" placeholder="请输入捐赠的品牌和型号" />
				</view> -->
				<view class="form-item">
					<text class="info-name" style="position: relative;left: -21rpx;">
						<span style="color: red;margin-right: 5rpx;">*</span>
						物品数量：
					</text>
					<input type="text" v-model="item.itemsNum" @input="calculateTotalPrice(index)" placeholder="请输入数量" />
				</view>
				<view class="form-item">
					<text class="info-name">物品单价：</text>
					<input type="text" v-model="item.itemUnitPrice" @input="calculateTotalPrice(index)" placeholder="请输入单价" />
				</view>
				<view class="form-item">
					<text class="info-name">物品总价：</text>
					<input type="text" v-model="item.itemTotalPrice" placeholder="请输入总价" />
				</view>
				<!-- <view class="form-item" style="border: none;">
					<text class="info-name">物品要求：</text>
					<text>全新【春秋装】</text>
				</view> -->
			</view>
		</view>

		<!-- 相关证明图片 -->
		<view class="photo-upload">
			<view class="info-title">
				<view></view>
				<text>相关证明图片（非必填）</text>
				<span>{{ imgUrls.length }}/6</span>
			</view>
			<view class="img-axplain"><text>包括实物照片、质量合格证书、价值凭证等</text></view>

			<view class="upload-img">
				<view class="uploaded-img" v-for="(item, index) in imgUrls" :key="index" :style="{ 'margin-right': index % 3 == 2 ? '0rpx' : '40rpx' }">
					<view class="del-img" @click="deleteImg(index)"><u-icon name="close" size="2" color="#ffffff"></u-icon></view>
					<image :src="item"></image>
				</view>
				<view class="slot-btn" @click="upload()" :style="{ 'margin-right': imgUrls.length % 3 == 0 ? '30rpx' : '0rpx' }">
					<image mode="widthFix" src="../../static/donate/img_donate_imgupload.png"></image>
					<text>添加图片</text>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="btn-box">
			<!-- <button class="save-btn">暂存资料</button> -->
			<button class="next-btn" @click="submitData">提交</button>
			<!-- <button class="next-btn" @click="$gopage('/pages/donate/stepTwo')">下一步</button> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			personType: 0, // 判断为企业还是个人
			anonymity: false, // 是否匿名
			showLogisticsTip: false, // 物流提示弹窗是否显示
			needInvoice: true, // 是否需要发票
			activeType: 0, // 选择捐赠物资类型
			showLogisticsType: false,
			choosed: 0,
			imgUrls: [],
			logisticsType: [
				{
					text: '捐赠者送货上门'
				},
				{
					text: '捐赠者自主寄送'
				}
			],
			pagesData: {},
			items: [],
			personInfo: {
				address: '', // 物资接收地
				// contacts: '', // 联系人
				// contactsAddress: '', // 联系地址
				// contactsPhone: '', // 联系人电话
				disasterId: '',	// 关联灾情id
				disasterName: '',
				donationCode: '', // 活动编号
				donationName: '', // 活动名称
				fileUrl: '', // 相关证明图片
				// id: 0,
				// insertTime: '',
				// inserter: 0,
				logisticsMode: '', //物流方式:1单位上门2送货上门3自主寄送
				// logisticsNum: '', //物流单号
				// modifiable: '', //是否可修改 0:是 1:否
				recipient: '', //接收人姓名
				recipientPhone: '', //接收人联系方式
				// sender: '', //寄件人姓名
				// senderAddress: '', //寄件人地址
				// senderPhone: '', //寄件人电话
				// status: '', //状态：0:已提交(待确认入库) 2:已入库(待用户确认捐赠) 3:已确认(可查看证书)
				// updateTime: '',
				// updater: 0,
				userCard: '', //捐赠人身份证号码
				userName: '', //捐赠人姓名
				userPhone: ''
				// items: [{
				// 	// getItemsCode: '', //到货物资编号
				// 	// getItemsName: '', //到货物资名称
				// 	// getItemsNum: '', //到货物资数量
				// 	// getUnitCode: '', //到货物资单位
				// 	// id: 0,
				// 	// insertTime: '',
				// 	// inserter: 0,
				// 	itemTotalPrice: '', //物品总价
				// 	itemUnitPrice: '', //物品单价
				// 	itemsCode: '', //捐赠物资编号
				// 	itemsName: '', //捐赠物资名称
				// 	itemsNum: '', //捐赠物资数量
				// 	// personId: 0, //个人捐赠信息id
				// 	// unitCode: '', //捐赠物资单位
				// 	// updateTime: '',
				// 	// updater: 0
				// }]
			}
		};
	},
	onLoad() {
		this.getData();
		// 进入页面默认送货上门
		this.personInfo.logisticsMode = 2;
	},
	methods: {
		getData() {
			this.$ajax({
				url: '/emergency_supplies/api/gft/donation/v1/donationInfo/selectActivityDetails',
				noErrorMsg: true,
				moduleUrl: 1,
				method: 'post',
				data: {
					id: 38
				}
			}).then(res => {
				if (res.code == 200) {
					this.pagesData = res.data;

					this.personInfo.disasterId = this.pagesData.disasterId;
					this.personInfo.disasterName = this.pagesData.disasterName;
					this.personInfo.donationCode = this.pagesData.donationCode;
					this.personInfo.address = this.pagesData.address;
					this.personInfo.donationName = this.pagesData.donationName;
					this.personInfo.recipient = this.pagesData.recipient;
					this.personInfo.recipientPhone = this.pagesData.recipientPhone;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		changeAnonymity(content) {
			this.anonymity = content;
		},
		showTip() {
			this.showLogisticsTip = true;
		},
		changeInvoice(content) {
			this.needInvoice = content;
		},
		changeTypes(index) {
			this.activeType = index;
		},
		addGoods(index) {
			this.items.push({
				itemTotalPrice: '', //物品总价
				itemUnitPrice: '', //物品单价
				itemsCode: this.pagesData.donationSuppliesInfoList[index].itemsCode, //捐赠物资编号
				itemsName: this.pagesData.donationSuppliesInfoList[index].itemsName, //捐赠物资名称
				itemsNum: '' ,//捐赠物资数量
				unitCode: this.pagesData.donationSuppliesInfoList[index].unitCode
			});
		},
		delGoods(index) {
			uni.showModal({
				title: '删除物资',
				content: '确定删除该物资项?',
				success: res => {
					if (res.confirm) {
						this.items.splice(index, 1);
					}
				}
			});
		},
		closePop() {
			this.showLogisticsTip = false;
		},
		showLogistics() {
			this.showLogisticsType = true;
		},
		chooseLogistice(index) {
			this.choosed = index;
			// 1单位上门2送货上门3自主寄送
			if (this.logisticsType[index].text == '捐赠者送货上门') {
				this.personInfo.logisticsMode = 2;
			} else if (this.logisticsType[index].text == '捐赠者自主寄送') {
				this.personInfo.logisticsMode = 3;
			}
		},
		calculateTotalPrice(index){
			if(this.items[index].itemsNum == '' || this.items[index].itemUnitPrice == '')
			{
				this.items[index].itemTotalPrice = ''
				return 
			}
			this.items[index].itemTotalPrice = this.items[index].itemsNum * this.items[index].itemUnitPrice
		},
		// 删除图片
		deleteImg(index) {
			uni.showModal({
				title: '删除图片',
				content: '确定删除图片?',
				success: res => {
					if (res.confirm) {
						this.imgUrls.splice(index, 1);
					}
				}
			});
		},
		// 上传图片
		upload() {
			let length = this.imgUrls.length;

			if (6 - length <= 0) {
				uni.showToast({
					title: '最多上传6张',
					icon: 'none'
				});
				return false;
			}

			uni.chooseImage({
				// 设置不超过3张图片
				count: 6 - length,
				success: res => {
					let tempFiles = res.tempFiles;
					res.tempFilePaths.forEach((item, index) => {
						if (parseInt(tempFiles[index].size / 1024) > 10240) {
							uni.showToast({
								title: '大小限制10M',
								icon: 'none'
							});
							return false;
						}
						uni.uploadFile({
							url: this.$basePath + '/emergency_supplies/api/gft/comm/file/v1/upload',
							filePath: item,
							formData: {
								dir: 'image',
								storage: 'fastdfs'
							},
							success: uploadFileRes => {
								let res = JSON.parse(uploadFileRes.data);
								if (res.code == 200) {
									this.imgUrls.push(res.data.url);
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
								}
							},
							fail: failContent => {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						});
					});
				}
			});
		},

		// 提交捐赠
		submitData() {
			this.personInfo.items = this.items;
			this.personInfo.fileUrl = this.imgUrls.join(',');
			
			this.$ajax({
				url: '/emergency_supplies/api/gft/donation/v1/donationInfo/saveDonationInfo',
				noErrorMsg: true,
				moduleUrl: 1,
				method: 'post',
				contentType: 'application/json',
				data: this.personInfo
			}).then(res => {
				if (res.code == 200) {
					this.$gopage('/pages/donate/finishDonate');
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.donate-main {
	padding-bottom: 40rpx;
}
// 标题样式
.info-title {
	display: flex;
	align-items: center;
	view {
		width: 10rpx;
		height: 30rpx;
		margin-right: 20rpx;
		background-color: #fe5745;
	}
	text {
		color: #333333;
		font-size: 34rpx;
		font-weight: bold;
		flex: 1;
	}
	span {
		font-size: 30rpx;
		color: #666666;
	}
}

.danate-top {
	padding: 40rpx 30rpx 68rpx 30rpx;
	margin-bottom: 80rpx;
	background-image: url(../../static/donate/img_donate_top_bg.png);
	background-size: 100% 100%;
	.top-title {
		display: flex;
		align-items: center;
		margin-bottom: 59rpx;
		text {
			font-size: 34rpx;
			color: #ffffff;
			flex: 1;
			font-weight: bold;
		}
		button {
			border-radius: 10rpx;
			border: solid 2rpx #ffffff;
			font-size: 26rpx;
			color: #ffffff;
		}
	}
	.top-process {
		.process-line {
			height: 16rpx;
			background-color: #ffffff;
			border-radius: 8rpx;
			opacity: 0.6;
		}
		.process-node {
			display: flex;
			view {
				position: relative;
				top: -40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: rgba(255, 255, 255, 0.7);
				font-size: 26rpx;
				image {
					width: 64rpx;
					margin-bottom: 16rpx;
				}
			}
		}
	}
}

// 捐赠人信息 其他信息
.person-info {
	padding: 0rpx 30rpx;
	margin-bottom: 79rpx;
	.info-form {
		margin-left: 20rpx;
		.form-item {
			padding: 36rpx 19rpx 36rpx 0rpx;
			border-bottom: 1px solid #f5f5f5;
			display: flex;
			align-items: center;
			color: #333333;
			font-size: 28rpx;
			.info-name {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				image {
					width: 34rpx;
				}
			}
			.choose-logistics {
				text {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			text:nth-child(2),
			input {
				flex: 1;
				text-align: right;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.form-radio {
				display: flex;
				align-items: center;
				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 18rpx;
				}
			}
			input {
				text-align: right;
			}
			.tip {
				border-radius: 20rpx;
				.tip-top {
					width: 100%;
					height: 150rpx;
					background-image: url(../../static/donate/img_donate_pop_top.png);
					background-size: 100% 100%;
					color: white;
					font-size: 34rpx;
					text-align: center;
					line-height: 150rpx;
					font-weight: bold;
				}
				.tip-center {
					padding: 15rpx 30rpx;
					font-size: 26rpx;
					line-height: 48rpx;
					color: #333333;
					letter-spacing: 2rpx;
					span {
						font-size: 27rpx;
						font-weight: bold;
					}
				}
				.tip-bottom {
					background-image: url(../../static/donate/img_donate_pop_bottom.png);
					background-size: 100% 100%;
					height: 150rpx;
					font-size: 32rpx;
					text-align: center;
					color: #fe5745;
					line-height: 180rpx;
					font-weight: bold;
				}
			}
			/deep/.u-border-bottom:after {
				border-bottom: solid #edf0f5;
			}
		}
		.textarea-style {
			width: calc(100% - 62rpx);
			color: #333333;
			height: 200rpx;
			padding: 29rpx 31rpx;
			background-color: #f5f5f5;
			border-radius: 6rpx;
		}
	}
}

// 捐赠物资
.donate-goods {
	padding: 0rpx 30rpx;
	margin-bottom: 79rpx;
	.goods-types {
		margin-left: 20rpx;
		margin-top: 40rpx;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		.goods-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: calc(33% - 40rpx);
			height: 100rpx;
			border-radius: 6rpx;
			border: solid 2rpx #fe5745;
			color: #fe5745;
			font-size: 24rpx;
			margin-bottom: 30rpx;
			text-align: center;
		}
		.goods-btn-active {
			background-image: linear-gradient(90deg, #ffada4 0%, #ff8275 41%, #fe5745 100%);
			box-shadow: 0rpx 3rpx 21rpx 0rpx rgba(254, 94, 77, 0.3);
			color: white;
		}
	}
	.add-goodstype {
		height: 80rpx;
		margin: 0rpx 20rpx;
		background-color: #fe5745;
		border-radius: 10rpx;
		color: #ffffff;
		font-size: 30rpx;
	}
	.add-goodstype:after {
		border: none;
	}
}
// 物资具体信息
.goods-detail {
	padding: 20rpx 20rpx 62rpx 20rpx;
	margin: 0rpx 30rpx;
	margin-bottom: 54rpx;
	background-color: #ffffff;
	box-shadow: 0rpx 3rpx 18rpx 0rpx rgba(0, 0, 0, 0.09);
	border-radius: 10rpx;
	.del {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		border-radius: 50%;
		background-color: #fe5745;
		position: relative;
		left: calc(100% - 20rpx);
		top: -20rpx;
	}
	.detail-title {
		color: #333333;
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 29rpx;
	}
	.info-form {
		.form-item {
			padding: 24rpx 6rpx 24rpx 26rpx;
			border-bottom: 1px solid #f5f5f5;
			display: flex;
			align-items: center;
			color: #333333;
			font-size: 28rpx;
			.info-name {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				flex: 1;
				image {
					width: 34rpx;
				}
			}
			input {
				text-align: right;
			}
		}
	}
}

// 上传图片
.photo-upload {
	padding: 0rpx 40rpx;
	.img-axplain {
		color: #999999;
		font-size: 26rpx;
		margin-bottom: 40rpx;
		margin-left: 29rpx;
	}
	.upload-img {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		.uploaded-img {
			width: calc(33% - 30rpx);
			height: 160rpx;
			border-radius: 6rpx;
			margin-bottom: 30rpx;
			position: relative;
			.del-img {
				background-color: #fe5745;
				width: 30rpx;
				height: 30rpx;
				padding: 18rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				position: absolute;
				z-index: 1;
				top: -20rpx;
				left: calc(100% - 20rpx);
			}
			image {
				width: 100%;
				height: 100%;
				border-radius: 6rpx;
			}
		}
		.slot-btn {
			width: calc(33% - 40rpx);
			height: 160rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 6rpx;
			border: 4rpx dashed #999999;
			font-size: 28rpx;
			color: #666666;
			margin-bottom: 30rpx;
			image {
				width: 56rpx;
				margin-bottom: 20rpx;
			}
		}
	}
}

// 底部按钮
.btn-box {
	display: flex;
	height: 70rpx;
	margin: 30rpx 50rpx 70rpx 50rpx;
	// margin-bottom: 70rpx;
	.save-btn {
		width: 280rpx;
		border-radius: 10rpx;
		border: solid 2rpx #fe5745;
		color: #333333;
		background-color: white;
		font-size: 30rpx;
		line-height: 70rpx;
	}
	.next-btn {
		// width: 280rpx;
		width: 100%;
		background-color: #fe5745;
		border-radius: 10rpx;
		color: #ffffff;
		font-size: 30rpx;
		line-height: 70rpx;
	}
	button:after {
		border: none;
	}
}
</style>
